<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3918654" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">我</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe726;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">首页_首页</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86f;</span>
                <div class="name"> 消息</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">礼物</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">礼物</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">职位</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">礼物</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">公司</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84f;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xe84f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">岗位</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">公司</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">纸飞机</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">面性椰子树</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe775;</span>
                <div class="name">盾牌</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c1;</span>
                <div class="name">纸飞机-fill</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c2;</span>
                <div class="name">纸飞机</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1677495272943') format('woff'),
       url('iconfont.ttf?t=1677495272943') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-my"></span>
            <div class="name">
              我
            </div>
            <div class="code-name">.icon-my
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinxi"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.icon-xinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouyeshouye"></span>
            <div class="name">
              首页_首页
            </div>
            <div class="code-name">.icon-shouyeshouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang1"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-star__easyico"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-star__easyico
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi1"></span>
            <div class="name">
               消息
            </div>
            <div class="code-name">.icon-xiaoxi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liwu"></span>
            <div class="name">
              礼物
            </div>
            <div class="code-name">.icon-liwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liwu1"></span>
            <div class="name">
              礼物
            </div>
            <div class="code-name">.icon-liwu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhiwei"></span>
            <div class="name">
              职位
            </div>
            <div class="code-name">.icon-zhiwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liwu2"></span>
            <div class="name">
              礼物
            </div>
            <div class="code-name">.icon-liwu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian1"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongsi"></span>
            <div class="name">
              公司
            </div>
            <div class="code-name">.icon-gongsi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao1"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gangwei"></span>
            <div class="name">
              岗位
            </div>
            <div class="code-name">.icon-gangwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongsi1"></span>
            <div class="name">
              公司
            </div>
            <div class="code-name">.icon-gongsi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi2"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhifeiji"></span>
            <div class="name">
              纸飞机
            </div>
            <div class="code-name">.icon-zhifeiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang2"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mianxingyezishu"></span>
            <div class="name">
              面性椰子树
            </div>
            <div class="code-name">.icon-mianxingyezishu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dunpai"></span>
            <div class="name">
              盾牌
            </div>
            <div class="code-name">.icon-dunpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paperPlane-fill"></span>
            <div class="name">
              纸飞机-fill
            </div>
            <div class="code-name">.icon-paperPlane-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paperPlane"></span>
            <div class="name">
              纸飞机
            </div>
            <div class="code-name">.icon-paperPlane
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-my"></use>
                </svg>
                <div class="name">我</div>
                <div class="code-name">#icon-my</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinxi"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#icon-xinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouyeshouye"></use>
                </svg>
                <div class="name">首页_首页</div>
                <div class="code-name">#icon-shouyeshouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang1"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star__easyico"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-star__easyico</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi1"></use>
                </svg>
                <div class="name"> 消息</div>
                <div class="code-name">#icon-xiaoxi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liwu"></use>
                </svg>
                <div class="name">礼物</div>
                <div class="code-name">#icon-liwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liwu1"></use>
                </svg>
                <div class="name">礼物</div>
                <div class="code-name">#icon-liwu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhiwei"></use>
                </svg>
                <div class="name">职位</div>
                <div class="code-name">#icon-zhiwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liwu2"></use>
                </svg>
                <div class="name">礼物</div>
                <div class="code-name">#icon-liwu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian1"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongsi"></use>
                </svg>
                <div class="name">公司</div>
                <div class="code-name">#icon-gongsi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao1"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gangwei"></use>
                </svg>
                <div class="name">岗位</div>
                <div class="code-name">#icon-gangwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongsi1"></use>
                </svg>
                <div class="name">公司</div>
                <div class="code-name">#icon-gongsi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi2"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhifeiji"></use>
                </svg>
                <div class="name">纸飞机</div>
                <div class="code-name">#icon-zhifeiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang2"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mianxingyezishu"></use>
                </svg>
                <div class="name">面性椰子树</div>
                <div class="code-name">#icon-mianxingyezishu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dunpai"></use>
                </svg>
                <div class="name">盾牌</div>
                <div class="code-name">#icon-dunpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paperPlane-fill"></use>
                </svg>
                <div class="name">纸飞机-fill</div>
                <div class="code-name">#icon-paperPlane-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paperPlane"></use>
                </svg>
                <div class="name">纸飞机</div>
                <div class="code-name">#icon-paperPlane</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
